<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    destroyOnClose="true"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="close"
    cancelText="关闭">
    <div style="margin-top: 20px;height: 1000px">
      <a-row style="padding: 10px">
        <a-col :span="12" v-for="(item,index) in url" :key="index">
          <videoPlayer
            :ref="'videoPlayer'+index"
            :options="initOption(item.pullURL)"
            class="vjs-custom-skin videoPlayer"
            :playsinline="false"
          />
        </a-col>
      </a-row>
    </div>
  </j-modal>
</template>
<script>
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
  export default {
    name: 'VideoInfoModal',
    components: {
      videoPlayer
    },
    data () {
      return {
        title:'',
        width:1600,
        visible: false,
        disableSubmit: true,
        url:[],
      }
    },
    methods: {

      close () {
        this.$emit('close');
        this.visible = false;
      },

      openVideo(url){
        this.visible = true;
        this.url=JSON.parse(url);
      },

      initOption(url){
        //url='rtmp://ns8.indexforce.com/home/mystream';
        //测试地址：  rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
        var videoOptions= {
            playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
            controls:true,
            autoplay: true, //如果true,浏览器准备好时开始回放。
            muted: false, // 默认情况下将会消除任何音频。
            loop: false, // 导致视频一结束就重新开始。
            preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: 'zh-CN',
            aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            techOrder: ['flash', 'html5'],      // 兼容顺序
            sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
              type: 'rtmp/hls',
              src: url	//拉流url
            }],
            poster: "", //你的封面地址
            notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              liveDisplay:true,
              timeDivider: true,
              durationDisplay: false,
              remainingTimeDisplay: true,
              fullscreenToggle: true  //全屏按钮
            }
          }
          return videoOptions;
      }
    }
  }
</script>